<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .big{
            width: 200px;
            height: 200px;  
            border-radius: 100%;
           
            border: 10px black solid;
            margin: 200px auto;
            position: relative;
        }
        .center{
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transform-origin:center;
        }
        .second{
            width: 5px;
            height: 65px;
            background-color: red;
            position: absolute;
            top: 59px;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .minute{
            width: 10px;
            height: 55px;
            background-color: #555555;
            position: absolute;
            top: 64px;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .hour{
            width: 10px;
            height: 45px;
            background-color: black;
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .big span{
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            transform-origin: 0 100px;
            font-size: 10px;
        }
        .big span:nth-of-type(1){
            left: 50%;
            transform: translate(-50%);
        }
        .big span:nth-of-type(2){
            transform: rotate(30deg)
        }
        .big span:nth-of-type(3){
            transform: rotate(60deg)
        }
        .big span:nth-of-type(4){
            top: 50%;
            left: 100%;
            transform: translate(-100%,-50%);
        }
        .big span:nth-of-type(5){
          transform: rotate(120deg);
        }
        .big span:nth-of-type(6){
          transform: rotate(150deg);
        }
        .big span:nth-of-type(7){
            top: 100%;
            left: 50%;
            transform: translate(-50%,-100%);
        }
        .big span:nth-of-type(8){
          transform: rotate(210deg);
        }
        .big span:nth-of-type(9){
          transform: rotate(240deg);
        }
        .big span:nth-of-type(10){
            top: 50%;
            left: 0%;
            transform: translate(0,-50%);
        }
        .big span:nth-of-type(11){
          transform: rotate(300deg);
        }
        .big span:nth-of-type(12){
          transform: rotate(330deg);
        }
    </style>
<body>
    <div class="big">
        <div class="center"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <span>12</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
    </div>
</body>

</html>